<template>
  <div class="detain-goods-page">
    <div class="search-wrapper">
      <super-search :search-form="searchForm" :search-item-config="searchItemList" @search="searchHandle"></super-search>
    </div>
    <div class="content-wrapper">
      <a-tabs v-model:activeKey="activeKey" @change="changeTabHandle">
        <a-tab-pane key="1" :tab="`申请中(${pageStat['1']})`"></a-tab-pane>
        <a-tab-pane key="2" :tab="`已放货(${pageStat['2']})`"></a-tab-pane>
        <a-tab-pane key="3" :tab="`已驳回(${pageStat['3']})`"></a-tab-pane>
      </a-tabs>
      <super-table
        :activeKey="activeKey"
        :height="tableHeight"
        ref="tableRef"
        v-model:page="searchForm.pageNum"
        v-model:limit="searchForm.pageSize"
        :loading="loading"
        :data="tableData"
        :total="searchForm.total"
        :row-config="{ height: 50 }"
        :column="tableColumn"
        @change-page="getData"
      >
        <template #tool>
          <a-button v-if="activeKey === '1'" v-debounce type="primary" @click="releaseCargoHandle" v-btnAuth="'RELEASECARGO_APPROVE'">通过审批</a-button>
          <a-button v-if="activeKey === '1'" v-debounce type="danger" @click="rejectReleaseCargoHandle" v-btnAuth="'RELEASECARGO_REJECT'">驳回</a-button>
          <a-button type="primary" v-debounce @click="exportHandle">批量导出</a-button>
        </template>

        <template #applyType="{ row }">
          <a-tag v-if="row.applyType === 1" color="#009688"> 延期付款 </a-tag>
          <a-tag v-if="row.applyType === 2" color="#2db7f5"> 直接放货 </a-tag>
        </template>
        <template #bizFileDetailReqDtoList="{ row }">
          <a-image-preview-group v-if="row.bizFileDetailReqDtoList">
            <a-image :width="80" :src="row.bizFileDetailReqDtoList[0].url" />
            <template style="display: none">
              <a-image v-for="(item,index) in row.bizFileDetailReqDtoList.map((t:any)=>t.url).slice(1)" :key="index" :src="item" />
            </template>
          </a-image-preview-group>
        </template>
      </super-table>
    </div>
    <!-- 弹窗 -->
    <a-modal v-model:visible="dialogOpts.visible" :keyboard="false" :closable="false" :footer="null" :title="dialogOpts.title" :width="dialogOpts.width">
      <component v-model:visible="dialogOpts.visible" :is="dialogOpts.component" :type="dialogOpts.type" :pass-data="dialogOpts.passData" @submit="dialogSubmitHandle"></component>
    </a-modal>
  </div>
</template>
<script lang="ts">
import RejectReleaseCargo from "./components/rejectReleaseCargo/index.vue";
export default {
  name: "ReleaseCargo",
  components: {
    RejectReleaseCargo
  }
};
</script>
<script lang="ts" setup>
import ModalHook from "@/hook/modalHook";
import TableHeightHook from "@/hook/tableHeightHook";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import { searchItemList } from "./data";
const { tableHeight, loading } = TableHeightHook(110);
const {
  tableData,
  tableRef,
  activeKey,
  dialogOpts,
  drawerOpts,
  pageStat,
  searchForm,
  tableColumn
  //  setVisible, onVisibleChange
} = InitHook();
const { searchHandle, getData, releaseCargoHandle, changeTabHandle, rejectReleaseCargoHandle, pageStateic, exportHandle } = OperationHook({
  tableData,
  tableRef,
  activeKey,
  drawerOpts,
  dialogOpts,
  pageStat,
  loading,
  searchForm
});

const { dialogSubmitHandle } = ModalHook({
  drawerOpts,
  dialogOpts,
  callBack: () => {
    getData();
    pageStateic();
  }
});
searchHandle();
</script>
<style lang="stylus" scoped>
.detain-goods-page{
    height: 100%;
    .file-list{
      height: 50px;
      overflow: auto;
    }
}
</style>
